<template>
  <div class="app-container">
    <div class="filter-container">

      <el-select v-model="listQuery.query_type" style="width: 150px" class="filter-item" @change="handleFilter1">
        <el-option v-for="item in typeOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>
      <!-- <el-select v-if="listQuery.query_type == '2'" v-model="listQuery.proxy" clearable filterable style="width: 150px" class="filter-item" @change="handleFilter">
        <el-option label="所有代理" value="" />
        <el-option v-for="(item,index) in dailiArr" :key="index" :label="item" :value="item" />
      </el-select> -->
      <el-select v-if="listQuery.query_type == '3'" v-model="listQuery.channel" clearable filterable style="width: 150px" class="filter-item" @change="handleFilter">
        <el-option label="所有渠道" value="" />
        <el-option v-for="(item,index) in qudaoArr" :key="index" :label="item" :value="item" />
      </el-select>
       <!-- <el-select v-model="listQuery.status" clearable filterable style="width: 150px" class="filter-item" @change="handleFilter">
        <el-option label="全部状态" value="" />
        <el-option v-for="(v, key) of allStatus" :key="key" :label="v" :value="key" />
      </el-select> -->
      <el-date-picker
        v-model="value1"
        type="daterange"
        align="left"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        class="filter-item pickertime"
        format="yyyy-MM-dd"
        value-format="timestamp"
        :picker-options="pickerOptions2"
        @change="handleFilter"
      />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-refresh" @click="handleCancel">
        重置
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      show-summary
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column key="1235" min-width="20" type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="oppo_uv:">
              <span>{{ props.row.oppo_uv }}</span>
            </el-form-item>
            <el-form-item label="vivo_uv:">
              <span>{{ props.row.vivo_uv }}</span>
            </el-form-item>
            <el-form-item label="xiaomi_uv:">
              <span>{{ props.row.xiaomi_uv }}</span>
            </el-form-item>
            <el-form-item label="huawei_uv:">
              <span>{{ props.row.huawei_uv }}</span>
            </el-form-item>

            <el-form-item label="oppo_ex:">
              <span>{{ props.row.oppo_ex }}</span>
            </el-form-item>
            <el-form-item label="vivo_ex:">
              <span>{{ props.row.vivo_ex }}</span>
            </el-form-item>
            <el-form-item label="xiaomi_ex:">
              <span>{{ props.row.xiaomi_ex }}</span>
            </el-form-item>
            <el-form-item label="huawei_ex:">
              <span>{{ props.row.huawei_ex }}</span>
            </el-form-item>

            <el-form-item label="oppo uv点击率:">
              <span>{{ (props.row.oppo_ex / props.row.oppo_uv * 100).toFixed(2)}} %</span>
            </el-form-item>
            <el-form-item label="vivo uv点击率:">
              <span>{{ (props.row.vivo_ex / props.row.vivo_uv * 100).toFixed(2)}} %</span>
            </el-form-item>
            <el-form-item label="xiaomi uv点击率:">
              <span>{{ (props.row.xiaomi_ex / props.row.xiaomi_uv * 100).toFixed(2)}} %</span>
            </el-form-item>
            <el-form-item label="huawei uv点击率:">
              <span>{{ (props.row.huawei_ex / props.row.huawei_uv * 100).toFixed(2)}} %</span>
            </el-form-item>
            
            <el-form-item label="oppo 拉起率(当前ip为基础):">
              <span>{{ (props.row.oppo_uv / props.row.ip * 100).toFixed(2)}} %</span>
            </el-form-item>
            <el-form-item label="vivo 拉起率(当前ip为基础):">
              <span>{{ (props.row.vivo_uv / props.row.ip * 100).toFixed(2)}} %</span>
            </el-form-item>
            <el-form-item label="xiaomi 拉起率(当前ip为基础):">
              <span>{{ (props.row.xiaomi_uv / props.row.ip * 100).toFixed(2)}} %</span>
            </el-form-item>
            <el-form-item label="huawei 拉起率(当前ip为基础)">
              <span>{{ (props.row.huawei_uv / props.row.ip * 100).toFixed(2)}} %</span>
            </el-form-item>

            <el-form-item label="oppo ip点击率(当前ip为基础):">
              <span>{{ (props.row.oppo_ex / props.row.ip * 100).toFixed(2)}} %</span>
            </el-form-item>
            <el-form-item label="vivo ip点击率(当前ip为基础):">
              <span>{{ (props.row.vivo_ex / props.row.ip * 100).toFixed(2)}} %</span>
            </el-form-item>
            <el-form-item label="xiaomi ip点击率(当前ip为基础):">
              <span>{{ (props.row.xiaomi_ex / props.row.ip * 100).toFixed(2)}} %</span>
            </el-form-item>
            <el-form-item label="huawei ip点击率(当前ip为基础):">
              <span>{{ (props.row.huawei_ex / props.row.ip * 100).toFixed(2)}} %</span>
            </el-form-item>

          </el-form>
        </template>
      </el-table-column>
      <el-table-column key="1" label="日期" align="center" min-width="120">
        <template slot-scope="{row}">
          <span>{{ row.datetime_ }}</span>
        </template>
      </el-table-column>
      <el-table-column label="站长账号" min-width="120" align="center">
        <template slot-scope="{row}">
          <span>{{ row.username }}</span>
        </template>
      </el-table-column>
      
      <el-table-column key="4" label="启动UV" prop="uv" min-width="120" align="center">
        <template slot-scope="{row}">
          <span>{{ row.uv }}</span>
        </template>
      </el-table-column>
      
      <el-table-column key="16" label="广告点击量" min-width="120" prop="adv_click" align="center">
        <template slot-scope="{row}">
          <span>{{ row.adv_click }}</span>
        </template>
      </el-table-column>
      <el-table-column key="6" label="CNZZ_IP" min-width="120" prop="ip" align="center">
        <template slot-scope="{row}">
          <span>{{ row.ip }}</span>
        </template>
      </el-table-column>
      <el-table-column key="199" label="拉起率" min-width="120" align="center">
        <template slot-scope="{row}">
          <span>{{ (row.uv / row.ip * 100).toFixed(2) }}%</span>
        </template>
      </el-table-column>
      <el-table-column key="99" label="点击率" min-width="120" align="center">
        <template slot-scope="{row}">
          <span>{{ (row.adv_click / row.ip * 100).toFixed(2) }}%</span>
        </template>
      </el-table-column>

      <el-table-column key="19" label="广告单价" min-width="120" align="center">
        <template slot-scope="{row}">
          <span>{{ row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column key="22" label="实际收益（8-10起）" prop="earnings" min-width="120" align="center">
        <template slot-scope="{row}">
          <span>{{ row.earnings }}</span>
        </template>
      </el-table-column>

      <el-table-column key="23" label="收量支出" min-width="120" prop="expenditure" align="center">
        <template slot-scope="{row}">
          <span>{{ row.expenditure }}</span>
        </template>
      </el-table-column>

      <el-table-column key="24" label="预计盈利" min-width="120" prop="money" align="center">
        <template slot-scope="{row}">
          <span>{{ row.money }}</span>
        </template>
      </el-table-column>
      
      <!-- <el-table-column label="状态" min-width="80" align="center">
        <template slot-scope="{ row }">
            <div>
              {{ allStatus[row.status] }}
            </div>
        </template>
      </el-table-column> -->

      <!-- <el-table-column label="操作">
        <template slot-scope="{ row }">
          <a-button
            type="link"
            :disabled="row.status != 2"
            size="small"
            @click="handleSettle(row, '结算')"
          >
            结算
          </a-button>
          <a-button
            type="link"
            size="small"
            :disabled="row.status != 2"
            @click="handleSettle(row, '作废')"
          >
            作废
          </a-button>
        </template>
      </el-table-column>
      <el-table-column v-if="listQuery.type === 2" key="13" label="操作" min-width="120" align="center">
        <template slot-scope="{row}">
          <el-button type="primary" @click="handleUpdate(row)">
            编辑
          </el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <pagination v-show="total > 0" :total="total" class="pageShow" :page.sync="listQuery.page" :limit.sync="listQuery.page_size" @pagination="getList" />
    <pagination v-show="total > 0" layout="prev, pager, next" :small="true" class="pageHidden" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.page_size" @pagination="getList" />

    <!-- <el-dialog :title="qudaoName + ' 报表修改'" :visible.sync="dialogFormVisible" :width="dialogWidth">
      <el-form ref="dataForm" :model="temp" label-position="left" label-width="100px" class="fullwidth">
        <el-form-item label="CNZZ_UV">
          <el-input v-model="temp.cnzz_uv" placeholder="请输入cnzz的uv量" />
        </el-form-item>
        <el-form-item label="CNZZ_PV">
          <el-input v-model="temp.cnzz_pv" placeholder="请输入cnzz的pv量" />
        </el-form-item>
        <el-form-item label="CNZZ_IP">
          <el-input v-model="temp.ip" placeholder="请输入cnzz的ip量" />
        </el-form-item>
        <div style="text-align: right">
          <el-button @click="dialogFormVisible = false">
            取消
          </el-button>
          <el-button type="primary" @click="updateData()">
            确定
          </el-button>
        </div>
      </el-form>
    </el-dialog> -->
  </div>
</template>

<script>
import { fetchList, fetchQudao, fetchDaili, update,update_cnzz_report } from '@/api/cnzz/cnzzreport'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { Message, MessageBox } from 'element-ui'
import {
  realDataInfo,
  getChartData,
  getAdvChartData,
  getProxyNameList,
  getChannelNameList,
} from "@/api/admin/admin";

export default {
  name: 'Cnzzreport',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      value1: '',
      qudaoArr: [],
      dailiArr: [],
      countUv: '',
      countPv: '',
      cnzzPv: '',
      cnzzUv: '',
      countIp: '',
      countProfit: '',
      countFeedback: '',
      listQuery: {
        page: 1,
        page_size: 20,
        query_type: 1,
        channel: '',
        proxy:'',
        status: '1',
        time_start: '',
        time_end: ''
      },
      allStatus: {
        1: "已结算",
        2: "未结算",
        3: "已作废",
      },
      pickerOptions2: {
        shortcuts: [{
          text: '昨天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      typeOptions: [
        { label: '按月', key: 0 },
        { label: '按总和查看(天)', key: 1 }, 
        // { label: '按代理查看', key: 2 }, 
        { label: '按渠道查看(天)', key: 3 }],
      dialogFormVisible: false,
      dialogWidth: 0,
      temp: {
        id: undefined,
        cnzz_uv: '',
        cnzz_pv: '',
        ip: '',
        price: ''
      },
      qudaoName: ''
    }
  },
  created() {
    this.getList()
   //获取渠道列表
    this.getChannelNameList();
    this.getProxylist()
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.setDialogWidth()
      })()
    }
  },
  methods: {
    //获取渠道列表
    getChannelNameList() {
      getChannelNameList({'status': 'all'}).then((r) => {
        this.qudaoArr = r.DATA;
      });
    },
    getProxylist(){
        getProxyNameList({'status': 'all'}).then((r) => {
            this.dailiArr = r.DATA;
        })
    },
    setDialogWidth() {
      const val = document.body.clientWidth
      const def = 550 // 默认宽度
      if (val < def) {
        this.dialogWidth = '100%'
      } else {
        this.dialogWidth = def + 'px'
      }
    },
    getList() {
      this.listLoading = true
      if (this.value1) {
        this.listQuery.time_start = this.value1[0] / 1000;
        this.listQuery.time_end = this.value1[1] / 1000;
      } else {
        this.listQuery.time_start = ''
        this.listQuery.time_end = ''
      }
      // if (this.listQuery.type === 1) {
      //   this.listQuery.channel = ''
      // }
      fetchList(this.listQuery).then(response => {
        this.list = response.DATA.list
        this.total = response.DATA.total
        // this.countUv = response.count_uv
        // this.countPv = response.count_pv
        // this.cnzzPv = response.cnzz_count_pv
        // this.cnzzUv = response.cnzz_count_uv
        // this.countIp = response.cnzz_count_ip
        this.listLoading = false
      })
    },
    getQudao() {
      fetchQudao().then(response => {
        this.qudaoArr = response.data
      })
    },
    getDaili() {
      fetchDaili().then(response => {
        this.dailiArr = response.data
      })
    },
    getSummaries() {
      if (this.listQuery.type === 1) {
        const sums = ['总计', this.countUv, this.countPv, this.countIp, '-', '-', '-', this.countProfit, this.countFeedback, '-']
        return sums
      } else if (this.listQuery.type === 2) {
        const sums = ['总计', '-', '-', this.countUv, this.countPv, this.countIp, '-', '-', '-', this.countProfit, this.countFeedback, '-']
        return sums
      } else {
        const sums = ['总计', '-', this.countUv, this.countPv, this.countIp, '-', '-', '-', this.countProfit, this.countFeedback, '-']
        return sums
      }
    },
    handleUpdate(row) {
      this.qudaoName = row.qudao
      this.temp.id = row.id
      this.temp.cnzz_uv = row.cnzz_uv
      this.temp.cnzz_pv = row.cnzz_pv
      this.temp.price = row.price
      this.temp.ip = row.ip
      this.dialogFormVisible = true
    },
    updateData() {
      if (this.temp.cnzz_uv === '') {
        Message({
          message: '请填写cnzz的uv',
          type: 'error',
          duration: 2000
        })
        return
      }
      if (this.temp.cnzz_pv === '') {
        Message({
          message: '请填写cnzz的pv',
          type: 'error',
          duration: 2000
        })
        return
      }
      if (this.temp.ip === '') {
        Message({
          message: '请填写cnzz的ip量',
          type: 'error',
          duration: 2000
        })
        return
      }
      update(this.temp).then(response => {
        if (response.code === 1) {
          this.dialogFormVisible = false
          this.getList()
          Message({
            message: response.msg || '修改成功',
            type: 'success',
            duration: 2000
          })
        } else {
          Message({
            message: response.msg || '修改失败',
            type: 'error',
            duration: 2000
          })
        }
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleFilter1() {
      this.listQuery.page = 1
      this.listQuery.channel = ''
      this.getList()
    },
    handleCancel() {
      this.value1 = ''
      this.listQuery.page = 1
      this.listQuery.channel = ''
      this.listQuery.proxy = ''
      this.listQuery.type = 1
      this.getList()
    },
  }
}
</script>

<style scoped>
  .pageHidden{
    display: none;
  }
  @media (max-width:550px) {
    .pageShow {
      display: none;
    }
    .pageHidden {
      display: block;
    }
    .pickertime{
      width: 100%;
    }
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 24%;
  }
</style>
